<template>
    <div class="layout-table">
        <h3>发布课程内容</h3>
        <div class="layout-table-button">
          <el-button type="primary" @click="toPath('CourseContentList')">返回课程列表</el-button>
        </div>

        <div class="content">

          <el-form :model="courseDetail" :rules="rules" ref="courseDetail" label-width="100px">


            <el-row>
              <el-col :span="12">
                <el-form-item label="是否团辅" >
                  <el-tooltip :content="'是否是团辅(1:是，0:否) 当前状态为: ' + courseDetail.isTuanFu " placement="top">
                    <el-switch
                        v-model="courseDetail.isTuanFu"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        active-value="1"
                        inactive-value="0"
                        @change="changeData()"
                    >
                    </el-switch>
                  </el-tooltip>
                </el-form-item>
              </el-col>
            </el-row>


            <el-row>
              <el-col :span="12">
                <el-form-item label="课程ID" prop="courseId">
                  <!--            <el-input v-model="courseDetail.courseId" @blur.prevent="getChapterList()"></el-input>-->
                  <el-select v-model="courseDetail.courseId" placeholder="请选择" @change="getChapterList()">
                    <el-option
                        v-for="item in courseIdList"
                        :key="item.name"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row v-if="this.courseDetail.isTuanFu <= 0">
              <el-col :span="12">
                <el-form-item label="章节ID" prop="chapterId">
                  <!--            <el-input v-model="courseDetail.chapterId"></el-input>-->
                  <el-select v-model="courseDetail.chapterId" placeholder="请选择">
                    <el-option
                        v-for="item in idList"
                        :key="item.chapterName"
                        :label="item.chapterName"
                        :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row v-if="this.courseDetail.isTuanFu <= 0">
              <el-col :span="12">
                <el-form-item label="章节名称" prop="chapterName">
                  <el-input v-model="courseDetail.chapterName"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row v-if="this.courseDetail.isTuanFu <= 0">
              <el-col :span="12">
                <el-form-item label="章节排序" prop="chapterSort">
                  <el-input v-model="courseDetail.chapterSort"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row v-if="this.courseDetail.isTuanFu <= 0">
              <el-col :span="12">
                <el-form-item label="小节名称" prop="periodName">
                  <el-input v-model="courseDetail.periodName"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row v-if="this.courseDetail.isTuanFu <= 0">
              <el-col :span="12">
                <el-form-item label="小节排序" prop="periodSort">
                  <el-input v-model="courseDetail.periodSort"></el-input>
                </el-form-item>
              </el-col>
            </el-row>



            <!--      <el-row>-->
            <!--        <el-col :span="12">-->
            <!--          <el-form-item label="课程内容" prop="courseDetailInfo">-->
            <!--            <Editor v-model="courseDetail.courseDetailInfo" @setInner="setInner"></Editor>-->
            <!--          </el-form-item>-->
            <!--        </el-col>-->
            <!--      </el-row>-->

            <el-row>
              <el-col :span="18">
                <el-form-item label="课程内容" prop="courseDetailInfo">
                  <tinymce-editor ref="editor"
                                  v-model="courseDetail.courseDetailInfo"
                                  :disabled="false"
                                  :language="language"
                                  :skin="skin">
                  </tinymce-editor>
                </el-form-item>
              </el-col>
            </el-row>


            <el-row v-if="this.courseDetail.isTuanFu > 0">
              <el-col :span="12">
                <el-form-item label="团辅资料" prop="filepath">
                    <el-upload
                        :file-list="fileList"
                        :on-remove="handleRemove"
                        :auto-upload="true"
                        :http-request="fileUpload"
                        multiple
                        :limit="3"
                        action="customize">
                      <el-button size="small" type="primary">点击上传</el-button>
                      <div slot="tip" class="el-upload__tip">请上传pdf格式的文件</div>
                    </el-upload>
                </el-form-item>
              </el-col>
            </el-row>


            <el-row style="text-align:center;margin:20px 0;">
              <el-col :span="12">
                <el-button type="primary" @click="submitForm('ruleForm')"  :loading="loading">提交</el-button>
                <el-button @click="resetForm('ruleForm')" style="margin-left:20px;">重置</el-button>
              </el-col>
            </el-row>


            <el-row>
              <el-col :span="12">
                <el-form-item label="HTML预览">
                  {{courseDetail.courseDetailInfo}}
                </el-form-item>
              </el-col>
            </el-row>


          </el-form>

        </div>
    </div>
</template>

<script>
import TinymceEditor from '@/components/tinymce-editor'
import {chapterList, courseList, addTeachCourseDetail, fileUpload} from '@/api/api'


export default {
  name: 'AddCourseContent',
  data() {
    return {
      language: 'zh_CN',
      skin: 'oxide',
      courseDetail: {
        courseId: '',
        chapterId:'',
        chapterName: '',
        chapterSort: '',
        periodName: '',
        periodSort: '',
        courseDetailInfo: '',
        isTuanFu: 0,
        filepath: null
      },
      rules: {
        isTuanFu: [
          { required: true, message: '请输入选择是否是团辅', trigger: 'blur' }
        ],
        courseId: [
          { required: true, message: '请输入课程id', trigger: 'blur' }
        ],
        chapterId: [
          { required: false, message: '请输入章节id', trigger: 'blur' }
        ],
        chapterName: [
          { required: false, message: '请输入章节名称', trigger: 'blur' }
        ],
        chapterSort: [
          { required: false, message: '请输入章节排序', trigger: 'blur' }
        ],
        periodName: [
          { required: true, message: '请输入小节名称', trigger: 'blur' }
        ],
        periodSort: [
          { required: true, message: '请输入小节排序', trigger: 'blur' }
        ],
        courseDetailInfo: [
          { required: true, message: '请输入课程内容', trigger: 'blur' }
        ]
      },
      courseIdList:[],
      idList:[],
      loading: false,
      fileList: [],
    }
  },
  components: {
    TinymceEditor
  },
  created() {

    this.getCourseList()

  },
  methods: {
    submitForm(){
      this.$refs.courseDetail.validate((valid) => {

        if (valid) {

          let param = {
            ...this.courseDetail
          }

          addTeachCourseDetail(param).then(res=>{
              if(res.code == 200){
                this.$message.success("添加成功 !!! ")
                this.$refs.courseDetail.resetFields()
                this.fileList = []
              }else{
                this.$message.error("添加失败 !!! ")
              }
            })
        }
      });

    },
    resetForm(){
      this.$refs.courseDetail.resetFields()
      this.getCourseList()
      this.fileList = []
    },
    getChapterList(){
      let param = {
        ...this.courseDetail
      }
      chapterList(param).then(res =>{
        if(res.code == 200){
          this.courseDetail.chapterId = null
          this.idList = res.data
          // this.$message.success("请求成功 !!! ")
        }else{
          this.$message.error("请求失败 !!! ")
        }
      })
    },
    toPath(value){
      this.$router.push({
        path:'/'+value
      })
    },
    getCourseList(){

      let param = {
        ...this.courseDetail
      }

      courseList(param).then(res =>{
        if(res.code == 200){
          this.courseIdList = res.data
          // this.$message.success("请求成功 !!! ")
        }else{
          this.$message.error("请求失败 !!! ")
        }
      })

    },
    changeData(){
      this.getCourseList()
      this.$refs.courseDetail.resetFields()

    },
    fileUpload(params){

      const formData = new FormData();
      formData.append("file", params.file);

      const uid = params.file.uid
      const fileName = params.file.name

      fileUpload(formData).then( res =>{
        if (res.code == 200){
          this.fileList.push({name: fileName,url: res.data.fileUrl,uid: uid})
          // this.courseDetail.filepath =  this.fileList[0].url
          this.courseDetail.filepath =  this.fileList
        }
      })

    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
      for (const i in this.fileList) {
        if (this.fileList[i].uid === file.uid) {
          this.fileList.splice(i, 1)
          console.log(this.fileList)
        }
      }
      // this.courseDetail.filepath =  this.fileList.length > 0 ?  this.fileList[0].url : ''
    },
  }
}
</script>

<style>

.content{
  margin: 10px 0px 0px 300px;
}

</style>
